<template>
  <view class="container" :style="appThemeStyle">
    <view class="tabs-wrap">
      <u-tabs
        bg-color="transparent"
        :list="tabs"
        :is-scroll="tabs.length > 4"
        v-model="curTab"
        :duration="0.2"
        :offset="[14, 6]"
        font-size="28"
        height="88"
        border-radius="4rpx"
        show-text
        name="pickChannelName"
        @change="onChangeTab"
      />
    </view>
    <view class="remarks-box">
      <view v-if="remarksList && remarksList.length" class="remarks-wrap">
        <view class="label">
          <text>备注信息</text>
          <u-badge :count="remarksList.length" :offset="[-12, -16]" />
        </view>
        <view class="remarks-list">
          <view
            v-for="(item, index) in remarksList"
            :key="index"
            class="remarks-item"
          >
            <text class="remarks-label">{{ item.pickChannelName }}</text>
            <text>{{ item.remarks }}</text>
          </view>
        </view>
      </view>
    </view>
    <view
      v-if="cateList.length"
      class="category"
      :style="{ height: `calc(100vh - var(--window-top) - 104rpx - ${remarksWrapHeight}px)` }"
    >
      <scroll-view
        class="cate-left p-bottom"
        :scroll-y="true"
      >
        <view
          class="type-nav"
          v-for="(item, index) in cateList"
          :key="index"
          :class="{ active: index === currentIndex }"
          @click="handleSelectNav(index)"
        >
          <view class="category-name oneline-hide">{{ item.categoryName }}</view>
          <view class="goods-count">{{ item.goodsCount || 0 }}件</view>
          <view v-if="index === currentIndex">
            <view class="top-radius" ></view>
            <view class="bottom-radius"></view>
          </view>
        </view>
      </scroll-view>
      <scroll-view
        class="category-wrap p-bottom"
        :scroll-y="true"
        v-if="goodsList.length"
      >
        <view class="category-item" v-for="(item, index) in goodsList" :key="index">
          <view class="item-flex" @click="handleControls(item)">
            <view class="image-wrap">
              <image :src="item.photo"/>
              <text class="stock-out" v-if="diffStockOut(item)">缺货</text>
            </view>
            <view class="good-info">
              <view class="title-wrap">
                <view class="title-name twoline-hide">{{ item.name }}</view>
                <view class="title-count">
                  <text class="label" :style="{ color: item.goodsQuantityCount >= 2 ? '#FF7D00' : '#666666' }">x</text>
                  <text class="quantity" :style="{ color: item.goodsQuantityCount >= 2 ? '#FF7D00' : '#333333' }">{{ item.goodsQuantityCount }}</text>
                </view>
              </view>
              <view class="describe">条码：{{ item.barcode }}</view>
              <view class="describe normal">
                <text>重量：{{ item.weight }}g</text>
                <text class="active" v-if="item.featureRemark">（{{ item.featureRemark }}）</text>
              </view>
            </view>
          </view>
          <view class="stepper" v-for="(pItem, pIndex) in item.picks" :key="pIndex">
            <view class="area">
              <text class="channel" :style="{ backgroundColor: getChannelCls(pItem.thirdChannelId) }">{{ getAbbreviation(pItem.thirdChannelId) }}</text>
              <text class="symbol">#</text>
              <text class="number">{{ pItem.orderSeq }}</text>
              <text class="tag" v-if="pItem.refundQuantity && pItem.quantity">退{{ pItem.refundQuantity }}件</text>
              <text class="tag cancel" v-if="!pItem.quantity">已取消</text>
            </view>
            <view class="area">
              <u-number-box
                v-model="pItem.selectedQuantity"
                :max="pItem.quantity"
                @change.stop="handleValChange($event, pItem)"
              />
              <u-button
                :disabled="pItem.selectedQuantity === pItem.quantity"
                type="primary"
                size="mini"
                :customStyle="{ marginLeft: '16rpx' }"
                @click.stop="handleValChange({ value: pItem.quantity }, pItem)"
              >拣货完成</u-button>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="footer-fixed">
      <view class="wrapper">
        <view class="pick-tips">
          <view class="area">
            <text class="iconfont">&#xe6c7;</text>
            <text class="text">拣货任务中</text>
          </view>
          <view
            class="fix oneline-hide"
            :class="{active: formatDiffTime(expectedCompletionTime).includes('剩余')}"
          >{{ formatDiffTime(expectedCompletionTime) }}</view>
        </view>
        <view class="btn-wrapper">
          <view class="btn-item active" @click="complete">完成</view>
          <view class="btn-item" @click="handleCallPopup">
            <text class="iconfont">&#xe6bd;</text>
            <text>呼叫</text>
          </view>
          <view class="btn-item" v-if="!pickConfig.pickMethod" @click="handleScanPick">
            <text class="iconfont">&#xe6af;</text>
            <text>扫码拣货</text>
          </view>
        </view>
      </view>
    </view>

    <u-modal
      v-model="showModal"
      title="操作提示"
      show-cancel-button
      confirm-text="直接返回"
      cancel-text="取消任务"
      :title-style="{ fontWeight: 'bold' }"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    >
      <view class="modal-content">
        <text>拣货任务正在进行中，是否取消任务？</text>
      </view>
    </u-modal>

    <!--标记弹窗-->
    <u-modal
      v-model="showControls"
      title="操作"
      :show-confirm-button="false"
      show-cancel-button
      cancel-text="返回"
      :title-style="{ fontWeight: 'bold' }"
      @cancel="cancelBack"
    >
      <view class="modal-content">
        <view
          class="blue"
          v-if="!isEmpty(controlsRow)"
          @click="handleStockOut(!controlsRow.picks.every(val => val.stockout))"
        >{{ controlsRow.picks.every(val => val.stockout) ? '取消标记缺货' : '标记缺货' }}</view>
        <view class="blue" v-if="!pickConfig.pickMethod" @click="handleResetQuantity">数量重置</view>
      </view>
    </u-modal>

    <!--任务提醒-->
    <u-modal
      v-model="showTaskModal"
      title="任务提醒"
      content="有拣货中订单申请售后了，系统将自动刷新拣货列表。"
      confirm-text="我知道了"
      :title-style="{ fontWeight: 'bold' }"
      :content-style="{ textAlign: 'left'}"
      @confirm="showTaskModal = false"
    >
    </u-modal>

    <!--呼叫用户-->
    <u-popup
      v-model="showCallPopup"
      mode="bottom"
      border-radius="20"
      :safe-area-inset-bottom="true"
      :closeable="true"
    >
      <view class="popup-content">
        <view class="page-title">选择需要呼叫的用户</view>
        <view class="list">
          <view class="item" v-for="(item, index) in pickOrders" :key="index">
            <block v-if="item.orderingPhone && item.clientPhone">
              <view class="channel">{{ channelName(item) }} <text>#{{ item.orderSeq }}</text></view>
              <view class="flex">
                <text>{{ item.clientName }}<text class="gray">（尾号{{ item.orderingPhone?.slice(-4) }}）</text></text>
                <text class="iconfont m-l-10" @click="handlePhone(item.clientPhone)">&#xe6bd;</text>
              </view>
            </block>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>

import store from '@/store'
import { cloneObj, diffTime, isEmpty } from "@/utils/util"
import * as PickApi from '@/api/order/pick'
import StoreModel from '@/common/model/Store'

export default {
  name: "index",
  data() {
    return {
      isEmpty,
      curTab: 0,
      tabs: [{
        pickOrderId: '',
        pickChannelName: '全部'
      }],
      currentIndex: 0,
      showModal: false,
      showControls: false,
      controlsRow: {},
      remarksList: [],
      remarksWrapHeight: 0,
      showCallPopup: false,
      showTaskModal: false,
      isOncePopup: true
    }
  },
  computed: {
    channels() {
      return store.getters.channels
    },
    allChannels() {
      return store.getters.allChannels
    },
    getChannelCls() {
      return (val) => {
        return this.allChannels.find(item => item.channelId === val)?.color
      }
    },
    getAbbreviation() {
      return (val) => {
        return this.allChannels.find(item => item.channelId === val)?.abbreviation
      }
    },
    channelName() {
      return ({ thirdChannelId }) => {
        return this.allChannels.find(item => item.channelId === thirdChannelId)?.channelName
      }
    },
    pickConfig() {
      return store.getters.pickConfig
    },
    pickOrders() {
      return store.getters.pickOrders
    },
    pickList() {
      return cloneObj(this.pickOrders)
    },
    expectedCompletionTime() {
      const tmp = this.pickList.find(item => item.pickOrderId === this.tabs[this.curTab].pickOrderId)
      if (tmp) return tmp.expectedCompletionTime
      return this.pickList[0]?.expectedCompletionTime
    },
    formatDiffTime() {
      return (val) => {
        return diffTime(val)
      }
    },
    diffStockOut() {
      return (item) => {
        return item.picks.every(val => val.stockout)
      }
    },
    cateList() {
      const { pickOrderId } = this.tabs[this.curTab]
      const pickObj = this.pickList.find(item => item.pickOrderId === pickOrderId)
      let categoryList = []
      if (pickObj) {
        categoryList = cloneObj(this.pickList.find(item => item.pickOrderId === pickOrderId).categoryList || [])
      } else {
        this.pickList.forEach(item => {
          item.categoryList?.forEach(cItem => {
            const key = cItem.id
            if (!categoryList.find(val => val.id === key)) {
              categoryList.push(cloneObj(cItem))
            }
          })
        })
      }
      // 统计分类总件数
      this.pickList.forEach(pickItem => {
        pickItem.goodsList?.forEach(goodsItem => {
          const selectPickOrderId = this.tabs[this.curTab].pickOrderId
          const { pickOrderId, categoryCode, quantity } = goodsItem
          if (!selectPickOrderId || selectPickOrderId === pickOrderId) {
            const category = categoryList.find(categoryItem => categoryItem.id === categoryCode)
            if (category) {
              category.goodsCount = (category.goodsCount || 0) + quantity
            }
          }
        })
      })
      return categoryList.sort((a, b) => a.sort - b.sort)
    },
    goodsList() {
      const result = []
      this.pickList.forEach(item => {
        if (!this.tabs[this.curTab].pickOrderId || this.tabs[this.curTab].pickOrderId === item.pickOrderId) {
          item.goodsList.forEach(goods => {
            if (goods.categoryCode === this.cateList[this.currentIndex].id) {
              const obj = {
                pickOrderId: item.pickOrderId,
                thirdChannelId: item.thirdChannelId,
                orderSeq: item.orderSeq,
                pickOrderGoodsId: goods.pickOrderGoodsId,
                quantity: goods.quantity,
                selectedQuantity: goods.selectedQuantity || 0,
                stockout: goods.stockout,
                refundQuantity: goods.refundQuantity || 0
              }
              const tmp = result.find(val => val.skuCode === goods.skuCode)
              if (tmp) {
                tmp.goodsQuantityCount = tmp.goodsQuantityCount + goods.quantity
                tmp.picks.push(obj)
              } else {
                goods.picks = [obj]
                goods.goodsQuantityCount = goods.quantity
                result.push(goods)
              }
            }
          })
        }
      })
      return result
    },
    socketAlertMessage() {
      return store.getters.socketAlertMessage
    }
  },
  watch: {
    remarksList: {
      handler(nVal, oVal) {
        if (nVal && nVal !== oVal) {
          if (!nVal.length) {
            this.remarksWrapHeight = 0
            return
          }
          this.$nextTick(() => {
            uni.createSelectorQuery()
              .select('.remarks-box')
              .boundingClientRect(data => {
                this.remarksWrapHeight = data?.height
              })
              .exec()
          })
        }
      },
      immediate: true
    },
    socketAlertMessage: {
      handler(nVal, oVal) {
        if (!nVal) return
        try {
          nVal = JSON.parse(nVal)
        } catch (e) {
          nVal = null
        }
        if (nVal && nVal.goodsList && this.pickList) {
          if (this.isOncePopup) {
            this.showTaskModal = true
            this.isOncePopup = false
          }
          const pick = this.pickList.find(item => item.pickOrderId == res.id)
          if (pick) {
            pick.goodsList.forEach(goods => {
              const rGoods = nVal.goodsList.find(val => val.id == goods.pickOrderGoodsId)
              if (rGoods) {
                const cloneGoods = cloneObj(goods)
                goods.quantity = rGoods.quantity
                goods.selectedQuantity = goods.selectedQuantity ? rGoods.quantity : 0
                goods.refundQuantity = cloneGoods.quantity - rGoods.quantity
              }
            })
          }
          const pickList = this.pickList.filter(item => {
            const totalQuantity = item.goodsList.reduce((pre, cur) => pre + cur.quantity, 0)
            return totalQuantity !== 0
          })
          if (!pickList.length) {
            uni.navigateBack()
            uni.$emit('syncRefresh', true)
          }
          store.commit('SET_PICK_ORDERS', pickList)
          store.commit('SET_SOCKET_ALERT_MESSAGE', null)
        }
      },
      deep: true,
      immediate: true
    }
  },
  onLoad() {
    this.getTabs()
    this.getRemarksList()
  },
  methods: {
    getTabs() {
      const tabMore = this.pickOrders.map(item => {
        const { pickOrderId, thirdChannelId, orderSeq, remarks } = item
        return {
          pickOrderId,
          pickChannelName: `${this.channels.find(val => val.thirdChannelId === thirdChannelId)?.channelName || '分类'}#${orderSeq}`,
          count: remarks ? '注' : ''
        }
      })
      this.tabs = [...this.tabs, ...tabMore]
    },
    getRemarksList() {
      const result = []
      const selectPickOrderId = this.tabs[this.curTab].pickOrderId
      this.pickList.forEach(item => {
        const { pickOrderId, thirdChannelId, orderSeq, remarks } = item
        if ((!selectPickOrderId || selectPickOrderId === pickOrderId) && remarks) {
          result.push({
            pickOrderId,
            pickChannelName: `${this.channels.find(val => val.thirdChannelId === thirdChannelId)?.channelName || '分类'}#${orderSeq}`,
            remarks
          })
        }
      })
      this.remarksList = result
    },
    onChangeTab(index) {
      this.curTab = index
      this.currentIndex = 0
      this.getRemarksList()
    },
    handleSelectNav(index) {
      this.currentIndex = index
    },
    handleValChange(e, item) {
      this.pickList.forEach(pick => {
        const goods = pick.goodsList.find(goods => goods.pickOrderGoodsId === item.pickOrderGoodsId)
        if (goods) {
          // 从当前商品分类组里面找出skuCode的一项，遍历picks的选中总数和上限总数用来做缺货标记的显隐
          const currentGoods = this.goodsList.find(val => val.skuCode === goods.skuCode)
          const selectedQuantitySum = currentGoods.picks.reduce((pre, cur) => pre + cur.selectedQuantity, 0)
          const quantitySum = currentGoods.picks.reduce((pre, cur) => pre + cur.quantity, 0)
          goods.selectedQuantity = e.value
          // 如果在打过标记之后增减数量，需要判断当前skuCode下的所有商品选中总数和上限总数不相等并且选中总数要有值
          goods.stockout = !!(goods.stockout && selectedQuantitySum !== quantitySum && selectedQuantitySum)
        }
      })
      store.commit('SET_PICK_ORDERS', this.pickList)
    },
    handleStockOut(bool) {
      this.pickList.forEach(pick => {
        const goods = pick.goodsList.find(goods => goods.skuCode === this.controlsRow.skuCode)
        if (goods) {
          const currentGoods = this.goodsList.find(val => val.skuCode === goods.skuCode)
          const selectedQuantitySum = currentGoods.picks.reduce((pre, cur) => pre + cur.selectedQuantity, 0)
          const quantitySum = currentGoods.picks.reduce((pre, cur) => pre + cur.quantity, 0)
          goods.stockout = bool && selectedQuantitySum !== quantitySum
        }
      })
      store.commit('SET_PICK_ORDERS', this.pickList)
      this.cancelBack()
    },
    handleControls(item) {
      this.controlsRow = item
      this.showControls = true
    },
    handleScanPick() {
      uni.scanCode({
        success: res => {
          const { result } = res
          this.pickList.forEach(pick => {
            const goods = pick.goodsList.find(goods => goods.barcode === result)
            if (goods) {
              let { quantity, selectedQuantity = 0 } = goods
              if (selectedQuantity < quantity) {
                selectedQuantity += 1
                goods.selectedQuantity = selectedQuantity
              }
            }
          })
          store.commit('SET_PICK_ORDERS', this.pickList)
        },
        fail: () => {
          this.$toast('未识别到该商品')
        }
      })
    },
    handleResetQuantity() {
      const { skuCode } = this.controlsRow
      this.pickList.forEach(pick => {
        const goods = pick.goodsList.find(goods => goods.skuCode === skuCode)
        if (goods) goods.selectedQuantity = 0
      })
      store.commit('SET_PICK_ORDERS', this.pickList)
      this.cancelBack()
    },
    complete() {
      const checkList = this.goodsList.map(item => {
        return item.picks.map(pick => {
          const tmp = this.pickList.find(val => val.pickOrderId === pick.pickOrderId)
          const pickObj = {
            pickOrderId: tmp.pickOrderId,
            thirdChannelId: tmp.thirdChannelId,
            channelOrderNo: tmp.channelOrderNo
          }
          const goodsList = []
          if (tmp.pickOrderId === pick.pickOrderId) {
            goodsList.push({
              pickOrderGoodsId: pick.pickOrderGoodsId,
              quantity: pick.quantity,
              selectedQuantity: pick.selectedQuantity,
              stockout: item.stockout
            })
          }
          return { ...pickObj, goodsList }
        })
      }).filter(Boolean).flat()
      if (!checkList.length) return this.$toast('暂无商品可供拣货！')
      for(let i = 0; i < checkList.length; i++) {
        const item = checkList[i]
        for(let j = 0; j < item.goodsList.length; j++) {
          const key = item.goodsList[j]
          if (key.selectedQuantity !== key.quantity && !key.stockout) {
            return this.$toast('商品未完成拣货，无法完成提交！')
          }
        }
      }
      const map = checkList.map(item => {
        const goodsList = item.goodsList.map(val => ({ pickOrderGoodsId: val.pickOrderGoodsId, quantity: val.selectedQuantity }))
        return { ...item, goodsList }
      })
      const params = this.mergeItemsById(map)
      this.processItems(params)
    },
    // 合并id相同的项
    mergeItemsById(items) {
      const mergedMap = new Map()
      items.forEach(item => {
        const { pickOrderId, goodsList, thirdChannelId, channelOrderNo } = item
        if (!mergedMap.has(pickOrderId)) {
          mergedMap.set(pickOrderId, { pickOrderId, thirdChannelId, channelOrderNo, goodsList: [] })
        }
        mergedMap.get(pickOrderId).goodsList = mergedMap.get(pickOrderId).goodsList.concat(goodsList)
      })
      return Array.from(mergedMap.values())
    },
    // 循环提交
    async processItems(params) {
      const promises = params.map(item => PickApi.complete(item))
      try {
        const results = await Promise.all(promises)
        results.forEach(result => {
          const { data } = result
          if (data) {
            this.$toast('拣货成功')
            uni.$emit('syncRefresh', true)
            StoreModel.logs({
              status: 1,
              businessId: promises.channelOrderNo,
              operationType: 'pick_finish'
            })
          }
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
            success: () => {
              store.commit('SET_PICK_ORDERS', [])
            }
          })
        }, 1000)
      } catch (error) {
        console.error('处理拣货请求时发生错误:', error)
        StoreModel.logs({
          status: 0,
          businessId: promises.channelOrderNo,
          operationType: 'pick_finish'
        })
      }
    },
    cancelBack() {
      this.showControls = false
    },
    handleConfirm() {},
    handleCancel() {},
    handleCallPopup() {
      this.showCallPopup = true
    },
    handlePhone(phone) {
      if (!phone) return this.$toast('此订单信息不全，暂无法拨打电话')
      const formatPhone = phone.replace(/-/g, ',');
      uni.makePhoneCall({
        phoneNumber: formatPhone,
        success: () => {
          console.log("调用成功!")
        },
        fail: () => {
          console.log("调用失败!")
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.container {
  overflow: hidden;

  .tabs-wrap {
    margin-bottom: 16rpx;
  }

  .remarks-wrap {
    display: flex;
    align-items: center;
    background-color: white;
    border-bottom: 2rpx solid #eeeeee;

    .label {
      color: #333333;
      font-size: 26rpx;
      margin: 0 32rpx 0 24rpx;
      flex-shrink: 0;
      position: relative;
    }

    .remarks-list {
      margin: 16rpx 0;
      padding: 0 16rpx;
      max-height: 274rpx;
      overflow-y: scroll;
      width: 100%;
      box-sizing: border-box;

      .remarks-item {
        margin-bottom: 8rpx;
        font-size: 24rpx;
        padding: 4rpx 16rpx;
        line-height: 40rpx;
        background-color: #FFF7E8;
        color: #FF7D00;
        border-radius: 8rpx;

        .remarks-label {
          padding-right: 16rpx;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .category {
    display: flex;
    background: #fff;
    // 设置ios刘海屏底部横线安全区域
    padding-bottom: calc(constant(safe-area-inset-bottom));
    padding-bottom: calc(env(safe-area-inset-bottom));

    .cate-left {
      width: 160rpx;
      background: #F3F5FA;

      .type-nav {
        padding: 16rpx;
        box-sizing: border-box;
        display: block;
        position: relative;
        text-align: center;

        &.active {
          background: #fff;

          .category-name {
            font-weight: 500;
          }
        }

        .category-name {
          font-size: 28rpx;
          color: #333333;
        }

        .goods-count {
          font-size: 24rpx;
          color: #999999;
          margin-top: 8rpx;
        }

        .top-radius {
          position: absolute;
          width: 24rpx;
          height: 24rpx;
          top: -24rpx;
          right: 0;
          background: #ffffff;
          z-index: 1;

          &::before {
            position: absolute;
            width: 24rpx;
            height: 24rpx;
            top: 0;
            left: 0;
            background: #F3F5FA;
            border-radius: 0 0 16rpx 0;
            content: '';
          }
        }

        .bottom-radius {
          position: absolute;
          width: 24rpx;
          height: 24rpx;
          bottom: -24rpx;
          right: 0;
          background: #ffffff;
          z-index: 1;

          &::after {
            position: absolute;
            width: 24rpx;
            height: 24rpx;
            top: 0;
            left: 0;
            background: #F3F5FA;
            border-radius: 0 16rpx 0 0;
            content: '';
          }
        }
      }
    }

    .category-wrap {
      width: calc(100% - 160rpx);
      background: #fff;

      .category-item {
        padding: 24rpx 16rpx;
        background: #fff;
        border-radius: 16rpx;
        border-bottom: 2rpx solid var(--eeeeee, #EEE);

        .item-flex {
          display: flex;

          .image-wrap {
            width: 144rpx;
            height: 144rpx;
            position: relative;

            image {
              width: 100%;
              height: 100%;
            }

            .stock-out {
              position: absolute;
              bottom: 0;
              left: 0;
              background: var(--00000065, rgba(0, 0, 0, 0.65));
              color: #fff;
              width: 100%;
              padding: 5rpx 0;
              font-size: 28rpx;
              height: 48rpx;
              text-align: center;
            }
          }

          .good-info {
            flex: 1;
            margin-left: 16rpx;
            position: relative;

            .title-wrap {
              margin-bottom: 8rpx;
              display: flex;

              .title-name, .title-count {
                font-weight: 500;
                color: #333333;
              }
              .title-name {
                font-size: 26rpx;
                min-width: 0;
                margin-right: 12rpx;
              }
              .title-count {
                margin-left: auto;
                flex-shrink: 0;

                .label {
                  font-weight: 400;
                  padding-right: 4rpx;
                  font-size: 20rpx;
                  color: #666666;
                }
                .quantity {
                  font-size: 28rpx;
                }
              }
            }

            .describe {
              font-size: 24rpx;
              line-height: 38rpx;
              color: #666666;
              display: flex;
              align-items: center;
              justify-content: space-between;

              &.normal {
                justify-content: normal;
              }

              .active {
                color: #F53F3F;
              }
            }
          }
        }

        .stepper {
          margin-top: 20rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .area {
            display: flex;
            align-items: center;

            .symbol {
              font-size: 24rpx;
              vertical-align: baseline;
            }

            .number {
              font-size: 24rpx;
              font-weight: 500;
            }

            .channel {
              font-size: 20rpx;
              padding: 0 6rpx;
              height: 32rpx;
              line-height: 32rpx;
              margin-right: 8rpx;
              border-radius: 4rpx;
              background: #25C156;
              color: #fff;
            }

            .tag {
              background: #FFECE8;
              color: #F53F3F;
              padding: 5rpx 10rpx;
              border-radius: 8rpx;
              font-size: 20rpx;
              margin-left: 8rpx;
            }

            .cancel {
              background: #FFF7E8;
              color: #FF7D00;
            }
          }
        }
      }
    }
  }

  // 底部操作栏
  .footer-fixed {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    right: 0;
    z-index: 11;
    background: #fff;
    border-top: 2rpx solid #eee;
    // 设置ios刘海屏底部横线安全区域
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .wrapper {
      padding: 16rpx 26rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .pick-tips {

        .area {
          display: flex;
          align-items: center;
          font-size: 30rpx;

          .iconfont {
            color: #2D71FD;
          }

          .text {
            margin-left: 8rpx;
            font-weight: 500;
          }
        }

        .fix {
          font-size: 24rpx;
          color: #F53F3F;
          margin-left: 38rpx;
          width: 170rpx;

          &.active {
            color: #00B42A;
          }
        }
      }

      .btn-wrapper {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .btn-item {
          padding: 16rpx 24rpx;
          background: #2D71FD;
          color: #FFFFFF;
          font-size: 28rpx;
          margin-left: 16rpx;
          border-radius: 4rpx;

          &.active {
            margin-left: 0;
          }

          .iconfont {
            margin-right: 8rpx;
          }
        }
      }
    }
  }

  .modal-content {
    padding: 24rpx;
    box-sizing: border-box;
    text-align: center;
    font-size: 30rpx;
    color: #333333;

    .blue {
      padding: 24rpx 0;
      color: $main-bg;
    }
  }

  .popup-content {
    padding: 24rpx;

    .page-title {
      text-align: center;
      margin-bottom: 40rpx;
      font-size: 32rpx;
      font-weight: bold;
    }

    .list {
      min-height: 30vh;
      max-height: 65vh;

      .item {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        border-radius: 16rpx;
        border-bottom: 1rpx solid var(--eeeeee, #EEE);
        padding: 24rpx 0;

        .channel {
          max-width: 180rpx;
          flex-shrink: 0;
        }

        .flex {
          flex: 1;
          text-align: right;
          margin-left: 10rpx;

          .gray {
            color: #999999;
          }
        }
      }
    }
  }

  scroll-view ::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
  }
}
</style>
